import { connect } from 'dva';
import { useEffect, useState } from 'react';
import { Form, Input, Button } from 'antd';
function SingalEmp(props, { employee, dispatch }) {
  useEffect(() => {
    // dispatch({
    //   type: 'employee/getAll',
    // });
    // console.log(props, 111);
    // console.log(props.employee, 222);
    //console.log(employee, 222);
    // console.log(user, 333);
  }, []);

  function handleSubmit() {
    ':id'.indexOf(props.match.params.id) !== -1
      ? props.dispatch({
          type: 'employee/add',
          payload: {
            user: {
              ...user,
              firstName: firstName,
              lastName: lastName,
              age: age,
              address: address,
              tags: [],
            },
          },
        })
      : props.dispatch({
          type: 'employee/update',
          payload: {
            user: {
              ...user,
              firstName: firstName,
              lastName: lastName,
              age: age,
              address: address,
            },
          },
        });
  }

  function change(aa) {
    console.log(aa);
  }

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 8,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };

  let user = {};
  let id = '';
  // console.log(props.match.params.id, 1123);
  // console.log('key='.indexOf(props.match.params.id), 2233);
  // console.log(':id'.indexOf(props.match.params.id) !== -1, 22334);
  if (
    ':id'.indexOf(props.match.params.id) !== -1 ||
    'key'.indexOf(props.match.params.id) !== -1
  ) {
    if (':id'.indexOf(props.match.params.id) !== -1) {
      //user = {};
      id = '';
    } else if ('key='.indexOf(props.match.params.id) !== -1) {
      id = props.match.params.id.split('=')[1];
    }
  }
  //const user = {};
  if (id == '' && props.match.params.id === ':id') {
    user = {};
  } else if (id !== '') {
    user = props.employee.list.find((user) => user.key === id);
  } else if (props.match.params.id !== ':id') {
    user = props.employee.list.find(
      (user) => user.key === props.match.params.id,
    );
  }
  const [firstName, setFirstName] = useState(user.firstName);
  const [lastName, setLastName] = useState(user.lastName);
  const [age, setAge] = useState(user.age);
  const [address, setAddress] = useState(user.address);
  // const user =
  //   props.match.params.id === undefined
  //     ? {}
  //     : porps.employee.list.find((user) => user.key === props.match.params.id);

  //let { firstName, lastName, age, address } = user;
  return (
    <div>
      <Form
        {...layout}
        name="user"
        style={{ paddingTop: '30px' }}
        initialValues={{
          firstName: user.firstName,
          lastName: user.lastName,
          age: user.age,
          address: user.address,
        }}
      >
        <Form.Item label="FirstName" name="firstName">
          <Input onChange={(e) => setFirstName(e.target.value)} />
        </Form.Item>

        <Form.Item label="LastName" name="lastName">
          <Input onChange={(e) => setLastName(e.target.value)} />
        </Form.Item>
        <Form.Item label="Age" name="age">
          <Input onChange={(e) => setAge(e.target.value)} />
        </Form.Item>
        <Form.Item label="Address" name="address">
          <Input onChange={(e) => setAddress(e.target.value)} />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" onClick={() => handleSubmit()}>
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default connect(({ employee }) => ({ employee }))(SingalEmp);
